import React, { Component } from 'react'
import { View, Image, StyleSheet ,Text} from 'react-native'
import { Grid } from '@ant-design/react-native';
import { get } from '@/src/utils/http';
import {navigationContext} from '@/src/context/navigation'


interface Props {

}
interface State {
  hotCate: Array<object>
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 20
  },
  itemContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  gridImg: {
    height: 100,
    width: 100,
    borderRadius: 8
  },
  title:{
    fontSize:15,
    color:'#666666'
  }
})

export default class Swiper extends Component<Props, State> {

  static contextType = navigationContext;

  state = {
    hotCate: []
  }

  async componentDidMount() {
    // console.log('hot cate: ',this.context)
    let result = await get('http://192.168.2.1:8088/hotcate')
    result.list.push({
      title:"更多"
    })
    this.setState({
      hotCate: result.list
    })
  }

  renderItem(item: any) {
    return (
      <View style={styles.itemContainer}>
        {
          item.img ? 
          <Image style={styles.gridImg} source={{ uri: item.img }}></Image>:null
        }
        <Text style={styles.title}>{item.title}</Text>
      </View>

    )
  }

  render() {
    return (
      <View style={styles.container}>
        <Grid
          data={this.state.hotCate}
          columnNum={3}
          // isCarousel
          onPress={(dataitem, index) => {
            this.context.navigation.push('List',{title:dataitem.title})
          }}
          renderItem={(dataitem) => this.renderItem(dataitem)}
        />
      </View>
    )
  }
}
